// 最大的盒子
.bigBox {
    width: 100%;
    height: 100vh;
    padding: 20px;


    // // 顶部的名字
    .headerBox {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;


        div {
            flex: 1;
        }

        // 左边
        .header_left {
            width: 100%;
            line-height: 40px;
            // background-color: violet;
            color: rgba(255, 255, 255, 0.815);

            small {
                color: rgba(245, 244, 244, 0.753);

            }
        }

        // 右边
        .header_right {
            width: 100%;
            height: 50px;
            // background-color: rgb(134, 34, 134);

            p {
                float: right;
                color: rgba(221, 221, 221, 0.753);
                margin-top: 13px;
                font-size: 12px;
            }
        }
    }


    // 主体
    .subjectBox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;

        // =========================== 左边
        .leftBox {
            width: 25%;
            // background: rgb(99, 114, 85);

            // 上面一句话
            .left_item1 {
                color: #eff1f2;
                font-size: 12px;
                background: #163750;
                border: 1px dashed #3699ff;
                padding: 5px 0;

                small {
                    color: #eff1f2c0;
                    font-size: 8px;
                }
            }

            // 最上方表格
            .left_table1 {
                table {
                    width: 100%;
                    font-size: 7px;
                    text-align: right;
                    color: #879abb;

                    tr {
                        line-height: 15px;
                    }

                    .a {
                        text-align: center;
                    }
                }
            }

            // 中间分隔线 
            .xian {
                width: 100%;
                height: 3px;
                border: 1px dashed #3699ff;
                margin: 5px 0 3px 0;
            }

            // 左边第一个渐变柱形图
            .left_item2 {
                width: 100%;
                height: 200px;
                // background-color: sienna;
            }

            // 左边下第二个渐变柱形图  + 折线
            .left_item3 {
                width: 100%;
                height: 200px;
                // background-color: rgb(90, 63, 50);
            }

        }

        // ============================ 中间 
        .centerBox {
            flex: 1;
            // background: rgb(184, 224, 144);
            margin: 0 15px;
            padding: 20px;
            position: relative;

            // 地图旁边的数据
            .center_item2_ul1{
                position: absolute;
                top: 30px;
            }
            .center_item2_ul2{
                position: absolute;
                top: 100px;
            }
            .center_item2_ul3{
                position: absolute;
                top: 180px;
            }



            // 中间的大地图
            .center_item2 {
                width: 100%;
                height: 500px;
                // background-color: steelblue;
            }

            #echartsMap {
                width: 100%;
                height: 500px;
            }

            // 一句话
            .center_item1 {
                color: #eff1f2;
                font-size: 12px;
                background: #163750;
                border: 1px dashed #3699ff;
                padding: 5px 0;

                small {
                    color: #eff1f2c0;
                    font-size: 8px;
                }
            }

            // 中间下面的两个圆饼
            .conter_item3 {
                width: 100%;
                height: 230px;
                // background-color: tan;
                display: flex;
                justify-content: space-between;
                position: relative;

                // 中间的  下面  第一个圆
                .conter_left {
                    flex: 1;
                    height: 100%;
                    // background-color: skyblue;
                }

                // .中间的 分割线
                .conter_bor {
                    width: 5px;
                    height: 100%;
                    border: 1px dashed #3699ff;
                    position: absolute;
                    left: 51%;

                }

                // 中间的  下面  第二个圆
                .conter_right {
                    flex: 1;
                    height: 100%;
                    // background-color: rgb(45, 65, 73);

                }


                // 第二个圆中间的文字
                .conter_left_p8 {
                    position: absolute;
                    top: 100px;
                    right: 295px;
                    color: #becadb;
                }

                // 分割线
                .conter_left_bor2 {
                    position: absolute;
                    top: 76px;
                    right: 6px;
                    width: 24%;
                    height: 3px;
                    border: 1px dashed #3699ff;
                }

                // 百分比文字
                .conter_left_p5 {
                    position: absolute;
                    top: 159px;
                    right: 18px;
                    font-size: 14px;
                    color: #1159a9;
                }

                // 百分比文字
                .conter_left_p6 {
                    position: absolute;
                    top: 50px;
                    right: 18px;
                    font-size: 14px;
                    color: #d2704b;
                }

                // 百分比文字
                .conter_left_p7 {
                    position: absolute;
                    top: 107px;
                    right: 18px;
                    font-size: 14px;
                    color: #58b8e5;
                }





                // 第一个圆中间的文字
                .conter_left_p1 {
                    position: absolute;
                    top: 100px;
                    left: 10%;
                    color: #becadb;
                }

                // 分割线
                .conter_left_bor {
                    position: absolute;
                    top: 76px;
                    left: 220px;
                    width: 22%;
                    height: 3px;
                    border: 1px dashed #3699ff;
                }

                // 百分比文字
                .conter_left_p2 {
                    position: absolute;
                    top: 50px;
                    left: 360px;
                    font-size: 14px;
                    color: #d2704b;
                }

                // 百分比文字
                .conter_left_p3 {
                    position: absolute;
                    top: 107px;
                    left: 360px;
                    font-size: 14px;
                    color: #58b8e5;
                }

                // 百分比文字
                .conter_left_p4 {
                    position: absolute;
                    top: 159px;
                    left: 360px;
                    font-size: 14px;
                    color: #1159a9;
                }

            }
        }

        // ============================ 右边 
        .rightBox {
            width: 25%;
            // background: rgb(114, 81, 111);

            // 上面一句话
            .right_item1 {
                color: #eff1f2;
                font-size: 12px;
                background: #163750;
                border: 1px dashed #3699ff;
                padding: 5px 0;

                small {
                    color: #eff1f2c0;
                    font-size: 8px;
                }
            }

            // 表格
            .right_table2 {
                width: 100%;
                border-left: 1px dashed #3699ff;
                color: #8d98ad;
                font-size: 8px;

                table {
                    width: 90%;
                    margin-left: 10px;
                    border-collapse: collapse;

                    tr {
                        line-height: 25px;
                        // margin: 10px 0;

                        .jinE {
                            display: flex;
                            justify-content: space-between;

                            .lan {
                                color: #56a4b1;
                            }

                            .cheng {
                                color: #ce6d4a;
                            }
                        }
                    }
                }
            }

            // 右侧并排两个圆饼
            .right_item2 {
                width: 100%;
                height: 200px;
                // background-color: sienna;
                display: flex;
                justify-content: space-between;
                position: relative;


                // 第一个圆 百分比文字
                .right_left_p1 {
                    position: absolute;
                    bottom: 5px;
                    left: 150px;
                    font-size: 14px;
                    color: #3198c8;
                }

                //  第一个圆 百分比文字
                .right_left_p2 {
                    position: absolute;
                    left: 150px;
                    bottom: 35px;
                    font-size: 14px;
                    color: #d2704b;
                }

                // 第二个圆  百分比文字
                .right_left_p3 {
                    position: absolute;
                    bottom: 5px;
                    right: 30px;
                    font-size: 14px;
                    color: #3198c8;
                }

                // 第二个圆 百分比文字
                .right_left_p4 {
                    position: absolute;
                    right: 30px;
                    bottom: 35px;
                    font-size: 14px;
                    color: #d2704b;
                }


                //  分隔线
                .bor {
                    width: 5px;
                    height: 90%;
                    margin-top: 10px;
                    border: 1px dashed #3699ff;
                }

                .right_item3 {
                    flex: 1;
                    height: 100%;
                    // background-color: skyblue;
                    padding-left: 25px;
                }


                .right_item4 {
                    flex: 1;
                    height: 100%;
                    // background-color: rgb(45, 65, 73);
                    padding-left: 25px;
                }

                // 分割线
                .right_bor {
                    position: absolute;
                    bottom: 30px;
                    left: 30px;
                    width: 170px;
                    height: 3px;
                    border: 1px dashed #3699ff;
                }

                // 分割线
                .right2_bor {
                    position: absolute;
                    bottom: 30px;
                    right: 30px;
                    width: 170px;
                    height: 3px;
                    border: 1px dashed #3699ff;
                }
            }

            // 下面的周期性付款
            .right_item5 {
                width: 100%;
                height: 320px;
                display: flex;
                justify-content: space-between;

                // 左边
                .right_left {
                    flex: 1;
                    height: 100%;

                    // background: thistle;
                    table {
                        // margin-left: 10px;
                        border-collapse: collapse;

                        tr {
                            line-height: 20px;

                            th {
                                width: 50%;

                            }

                            td {
                                font-size: 8px;
                                color: #879abb;

                                // display: flex;
                                span {
                                    margin-right: 5px;
                                }

                                // 颜色
                                .col1 {
                                    width: 45px;
                                    height: 7px;
                                    background: #7af2fe;
                                    display: inline-block;
                                }

                                .col2 {
                                    width: 35px;
                                    height: 7px;
                                    background: #879abb;
                                    display: inline-block;
                                }
                            }
                        }
                    }
                }

                // 右边
                .right_right {
                    flex: 1;
                    background-color: slateblue;
                }

                // 分隔线
                .right_center {
                    width: 3px;
                    height: 100%;
                    border: 1px dashed #3699ff;
                    margin: 0 10px;
                }
            }
        }
    }





}

* {
    padding: 0;
    margin: 0;
    list-style: none;
}

div {
    box-sizing: border-box;
}

body {
    background: url(../img/背景图.png);
}